<template>
  <AdminLayout>
    <div class="dashboard-content">
          <!-- 顶部统计卡片 -->
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon users">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M16 4C18.2 4 20 5.8 20 8S18.2 12 16 12 12 10.2 12 8 13.8 4 16 4M16 14C20.4 14 24 15.8 24 18V20H8V18C8 15.8 11.6 14 16 14Z"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3>{{ stats.userCount }}</h3>
                <p>总用户数</p>
                <span class="stat-change positive">用户管理</span>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon music">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21 14 19.21 14 17V7H18V3H12Z"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3>{{ stats.musicCount }}</h3>
                <p>音乐曲目</p>
                <span class="stat-change positive">音乐管理</span>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon plays">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3>{{ stats.categoryCount }}</h3>
                <p>音乐分类</p>
                <span class="stat-change positive">分类管理</span>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon revenue">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,13H12V18H13V13H17V12H13V7H12V12H7V13Z"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3>{{ currentTime }}</h3>
                <p>系统运行</p>
                <span class="stat-change positive">正常运行</span>
              </div>
            </div>
          </div>



          <!-- 热门内容 -->
          <div class="popular-content">
            <div class="popular-card">
              <div class="card-header">
                <h3>🎵 热门音乐</h3>
                <button @click="loadHotMusic" class="refresh-btn" title="刷新数据">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>
                  </svg>
                </button>
              </div>
              <p class="card-subtitle">最近播放次数最高的五首歌曲</p>
              <div class="popular-list">
                <div v-if="hotMusic.length === 0" class="empty-message">
                  <span class="empty-icon">🎶</span>
                  <p>暂无播放数据</p>
                </div>
                <div v-else class="popular-item" v-for="(track, index) in hotMusic" :key="track.musicId">
                  <span class="rank" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</span>
                  <div class="track-info">
                    <p class="track-name">{{ track.name }}</p>
                    <p class="track-artist">{{ track.singer }}</p>
                  </div>
                  <div class="play-stats">
                    <span class="play-count">{{ formatNumber(track.playCount) }}</span>
                    <span class="play-label">播放</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="popular-card">
              <div class="card-header">
                <h3>🎵 热门音乐（续）</h3>
                <button @click="loadHotMusic" class="refresh-btn" title="刷新数据">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>
                  </svg>
                </button>
              </div>
              <p class="card-subtitle">播放量排行榜第6-10名</p>
              <div class="popular-list">
                <div v-if="hotMusicExtended.length === 0" class="empty-message">
                  <span class="empty-icon">🎶</span>
                  <p>暂无更多播放数据</p>
                </div>
                <div v-else class="popular-item" v-for="(track, index) in hotMusicExtended" :key="track.musicId">
                  <span class="rank" :class="{ 'top-three': index < 3 }">{{ index + 6 }}</span>
                  <div class="track-info">
                    <p class="track-name">{{ track.name }}</p>
                    <p class="track-artist">{{ track.singer }}</p>
                  </div>
                  <div class="play-stats">
                    <span class="play-count">{{ formatNumber(track.playCount) }}</span>
                    <span class="play-label">播放</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  </AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'
import { statistics } from '@/utils/adminApi'

export default {
  name: 'AdminDashboardView',
  components: {
    AdminLayout
  },
  data() {
    return {
      stats: {
        userCount: 0,
        musicCount: 0,
        categoryCount: 0,
        totalPlays: 0,
        monthlyPlays: 0,
        revenue: 0
      },
      hotMusic: [],
      hotMusicExtended: [],
      currentTime: '',
      timeTimer: null
    }
  },
  async mounted() {
    await this.loadStatistics()
    await this.loadHotMusic()
    this.updateCurrentTime()
    this.startTimeTimer()
  },
  
  beforeUnmount() {
    if (this.timeTimer) {
      clearInterval(this.timeTimer)
    }
  },
  
  methods: {
    async loadStatistics() {
      try {
        const response = await statistics.getStatistics()
        if (response.success) {
          this.stats.userCount = response.userCount
          this.stats.musicCount = response.musicCount
          this.stats.categoryCount = response.categoryCount
        }
      } catch (error) {
        console.error('获取统计信息失败:', error)
      }
    },
    
    formatNumber(num) {
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M'
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K'
      }
      return num.toString()
    },
    
    async loadHotMusic() {
      try {
        // 获取前10首热门音乐
        const response = await statistics.getHotMusic(10)
        if (response.success) {
          const allMusic = response.music
          // 前5首作为左侧热门音乐
          this.hotMusic = allMusic.slice(0, 5)
          // 6-10首作为右侧热门音乐
          this.hotMusicExtended = allMusic.slice(5, 10)
          console.log('成功加载热门音乐:', this.hotMusic.length, '首（前5名）')
          console.log('成功加载热门音乐（续）:', this.hotMusicExtended.length, '首（6-10名）')
        } else {
          console.warn('获取热门音乐失败:', response.message)
          this.hotMusic = []
          this.hotMusicExtended = []
        }
      } catch (error) {
        console.error('获取热门音乐失败:', error)
        this.hotMusic = []
        this.hotMusicExtended = []
      }
    },
    

    
    updateCurrentTime() {
      const now = new Date()
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    
    startTimeTimer() {
      // 每秒更新一次时间
      this.timeTimer = setInterval(() => {
        this.updateCurrentTime()
      }, 1000)
    }

  }
}
</script>

<style scoped>
.dashboard-content {
  padding: 32px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-icon.users { background: linear-gradient(45deg, #667eea, #764ba2); }
.stat-icon.music { background: linear-gradient(45deg, #f093fb, #f5576c); }
.stat-icon.plays { background: linear-gradient(45deg, #4facfe, #00f2fe); }
.stat-icon.revenue { background: linear-gradient(45deg, #43e97b, #38f9d7); }

.stat-info h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: white;
}

.stat-info p {
  font-size: 14px;
  color: #b3b3b3;
  margin: 0 0 4px 0;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
}

.stat-change.positive {
  color: #1db954;
}



.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: white;
}

.time-filter {
  background: #282828;
  border: 1px solid #404040;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.refresh-btn {
  background: transparent;
  border: none;
  color: #b3b3b3;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}



.popular-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.popular-card {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 24px;
}

.popular-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: white;
}

.card-subtitle {
  color: #b3b3b3;
  font-size: 13px;
  margin: 8px 0 20px 0;
  line-height: 1.4;
}

.popular-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popular-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.rank {
  width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #b3b3b3;
  flex-shrink: 0;
}

.rank.top-three {
  color: #1db954;
  font-weight: 700;
}

.track-info,
.user-info {
  flex: 1;
}

.track-name,
.user-name {
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin: 0 0 2px 0;
}

.track-artist,
.user-activity {
  font-size: 12px;
  color: #b3b3b3;
  margin: 0;
}

.play-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.play-count {
  font-size: 14px;
  color: #1db954;
  font-weight: 600;
}

.play-label {
  font-size: 11px;
  color: #b3b3b3;
}

.login-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6c757d;
  flex-shrink: 0;
}

.status-dot.online {
  background: #1db954;
  box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.3);
}

.status-text {
  font-size: 12px;
  color: #b3b3b3;
  font-weight: 500;
}

.empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #b3b3b3;
  text-align: center;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.empty-message p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .popular-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-dashboard {
    flex-direction: column;
  }
  
  .admin-sidebar {
    width: 100%;
    height: auto;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .dashboard-content {
    padding: 16px;
  }
}
</style> 